<template>
  <view class="order-container">
    <!-- 下单时间 -->
    <view class="order-info">
      <text>下单时间：{{order.add_time}}</text>
      <text>{{order_state}}</text>
    </view>
    <!-- 订单中的商品列表 -->
    <view class="order-goods-box">
      <view class="order-goods" v-for="(goods,index) in order.goods" :key="index">
        <!-- 左边的盒子 -->
        <view class="order-goods-left">
          <image :src="goods.goods_small_logo || defaultPic" class="goods-pic"></image>
        </view>
        <!-- 右边的盒子 -->
        <view class="order-goods-right">
          <!-- 商品的名字 -->
          <view class="goods-name">{{goods.goods_name}}</view>
          <view class="goods-info-box">
            <view class="goods-price">￥{{goods.goods_price | tofixed}}</view>
            <view class="goods-count">x {{goods.goods_count}}</view>
          </view>
        </view>
      </view>
    </view>
    <!-- 订单信息和对订单的操作 -->
    <view class="order-handle">
      <text class="order-tip">共{{order.category_count}}类{{order.goods_count}}个</text>
      <!-- 合计 -->
      <view class="amount-box">
        合计：<text class="amount">￥{{order.price | tofixed}}</text>
      </view>
      <!-- 按钮 -->
      <view class="btn-container">
        <!-- 订单状态不同，展示的按钮不同 -->
        <view class="btn-wait-pay" v-if="btn=='支付/取消订单'">
          <view class="btn-cancel" @click="cancelOrder">取消订单</view>
          <view class="btn-pay" @click="payOrder">支付</view>
        </view>
        <view class="btn-receive" v-if="btn=='确认收货'" @click="confirmReceive">确认收货</view>
        <view class="btn-return" v-if="btn=='申请退款'" @click="applyReturn">申请退款</view>
      </view>
    </view>
  </view>
</template>

<script>
  import { mapMutations } from 'vuex'
  export default {
    name: "my-order-goods",
    props: {
      order: {
        type: Object,
        default: {}
      },
      currentIndex: { //记录当前在哪一个标签页
        type: Number,
        default: 0
      }
    },
    data() {
      return {
        // 默认的空图片
        defaultPic: 'https://img3.doubanio.com/f/movie/8dd0c794499fe925ae2ae89ee30cd225750457b4/pics/movie/celebrity-default-medium.png',
        order_copy: {}
      };
    },
    created() {
      // 保存订单信息，方便后边手动隐藏‘取消支付’和‘支付’按钮、修改订单状态为‘交易关闭’（因为父组件通过props传递过来的值我们无法修改）
      this.order_copy = this.order
    },
    beforeUpdate() {
      // 保存订单信息，方便后边手动隐藏‘取消支付’和‘支付’按钮、修改订单状态为‘交易关闭’（因为父组件通过props传递过来的值我们无法修改）
      this.order_copy = this.order
    },
    methods: {
      ...mapMutations('m_user', ['getOrderInfo']),
      // 取消订单
      async cancelOrder() {
        uni.showModal({
          title: '提示',
          content: '确认取消订单吗？',
          success: async (res) => {
            if (res.confirm) {
              const { data: res } = await uni.$http.post('/api/public/v1/my/orders/cancel', {
                order: this.order
              })
              if (res.meta.status !== 200) return uni.$showMsg('取消订单失败！')
              // 取消订单成功，重新获取订单数据保存到本地
              this.getOrderInfo()
              uni.showToast({
                icon: 'success',
                title: res.meta.msg
              })
              // 若当前在‘全部订单’页面，则隐藏‘取消支付’和‘支付’按钮，修改订单状态为‘交易关闭’（因为虽然仓库中的订单信息已经修改，但是页面没有刷新，此处手动操作页面）
              if (this.currentIndex === 0) {
                this.order_copy.is_close = 1
              }
              // 若当前在‘待支付’页面，则导航到‘退款、售后’页面
              else if (this.currentIndex === 1) {
                setTimeout(() => {
                  uni.navigateTo({
                    url: '/subpkg/order/order?index=4'
                  })
                }, 1500)
              }
            } else if (res.cancel) {
              //什么都不做
            }
          },
          fail: (err) => uni.$showMsg('取消订单失败！')
        })
      },
      // 支付
      payOrder() {
        uni.showModal({
          title: '提示',
          content: '确认支付吗？',
          success: async (res) => {
            if (res.confirm) {
              // 解构赋值出该订单的订单号
              const { order_number } = this.order
              const { data: res1 } = await uni.$http.post('/api/public/v1/my/orders/repay', { order_number })
              if (res1.meta.status !== 200) return uni.$showMsg('支付失败！')
              // 支付成功，重新获取订单数据保存到本地
              this.getOrderInfo()
              uni.showToast({
                icon: 'success',
                title: '支付成功'
              })
              if (this.currentIndex === 0) {
                this.order_copy.is_pay = 1
              } else if (this.currentIndex === 1) {
                // 跳转到待发货页面
                setTimeout(() => {
                  uni.navigateTo({
                    url: '/subpkg/order/order?index=2'
                  })
                }, 1500)
              }
            } else if (res.cancel) {
              // 在此处取消支付的话，不用创建订单
              return uni.$showMsg('用户取消了支付！')
            }
          },
          fail: (err) => uni.$showMsg('支付失败！')
        })
      },
      // 确认收货
      confirmReceive() {
        uni.showModal({
          title: '提示',
          content: '确认收到货了吗？',
          success: async (res) => {
            if (res.confirm) {
              // 解构赋值出该订单的订单号
              const { order_number } = this.order
              const { data: res1 } = await uni.$http.post(
                '/api/public/v1/my/orders/confirmreceive', { order_number })
              if (res1.meta.status !== 200) return uni.$showMsg('确认收货失败！')
              // 确认收货成功，重新获取订单数据保存到本地
              this.getOrderInfo()
              uni.showToast({
                icon: 'success',
                title: '确认收货成功'
              })
              if (this.currentIndex === 0) {
                this.order_copy.is_receive = 1
              } else if (this.currentIndex === 3) {
                // 跳转到待发货页面
                setTimeout(() => {
                  uni.navigateTo({
                    url: '/subpkg/order/order?index=0'
                  })
                }, 1500)
              }
            } else if (res.cancel) {
              // 此处都不做
            }
          },
          fail: (err) => uni.$showMsg('支付失败！')
        })
      },
      // 申请退款
      applyReturn() {
        uni.showModal({
          title: '提示',
          content: '确定申请退款吗？',
          success: async (res) => {
            if (res.confirm) {
              // 解构赋值出该订单的订单号
              const { order_number } = this.order
              const { data: res1 } = await uni.$http.post(
                '/api/public/v1/my/orders/applyreturn', { order_number })
              if (res1.meta.status !== 200) return uni.$showMsg('申请退款失败！')
              // 申请退款成功，重新获取订单数据保存到本地
              this.getOrderInfo()
              uni.showToast({
                icon: 'success',
                title: '申请退款成功'
              })
              if (this.currentIndex === 0) {
                this.order_copy.is_return = 1
              }
            } else if (res.cancel) {
              // 此处都不做
            }
          },
          fail: (err) => uni.$showMsg('申请退款失败！')
        })
      }
    },
    computed: {
      // 计算订单状态
      order_state() {
        // if (this.order_copy.is_del) return '订单已删除'
        if (this.order_copy.is_close) return '交易关闭'
        if (this.order_copy.is_return) return '待退款'
        if (this.order_copy.is_receive) return '交易完成'
        if (!this.order_copy.is_pay) return '待付款'
        if (this.order_copy.is_pay && !this.order_copy.is_deliver) return '待发货'
        if (this.order_copy.is_pay && this.order_copy.is_deliver && !this.order_copy.is_receive) return '待收货'
      },
      // 计算订单需要展示哪些按钮
      btn() {
        if (this.order_state == '交易关闭') return 'NULL'
        if (this.order_state == '待退款') return 'NULL'
        if (this.order_state == '交易完成') return '申请退款'
        if (this.order_state == '待付款') return '支付/取消订单'
        if (this.order_state == '待发货') return 'NULL'
        if (this.order_state == '待收货') return '确认收货'
      }
    },
    // 过滤器
    filters: {
      // 把数字处理为带两位小数点的数字
      tofixed(num) {
        return Number(num).toFixed(2)
      }
    },
  }
</script>

<style lang="scss" scoped>
  .order-container {
    display: flex;
    flex-direction: column;
    padding: 10px 5px;
    border-bottom: 1px solid #f0f0f0;

    .order-info {
      font-size: 13px;
      line-height: 25px;
      color: gray;
      display: flex;
      justify-content: space-between;
    }

    .order-goods-box {
      margin: 10px 0;

      .order-goods {
        display: flex;
        margin-bottom: 5px;

        .order-goods-left {
          margin-right: 5px;
          display: flex;
          justify-content: space-between;
          align-items: center;

          .goods-pic {
            width: 100px;
            height: 100px;
            display: block; //解决图片之间的空隙
          }
        }

        .order-goods-right {
          display: flex;
          flex-grow: 1; //占满父容器
          flex-direction: column;
          justify-content: space-between;

          .goods-name {
            font-size: 13px;
          }

          .goods-info-box {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding-right: 5px;

            .goods-price {
              font-size: 16px;
              color: #C00000;
            }

            .goods-count {
              width: 50px;
              font-size: 14px;
              color: rgb(66, 66, 66);
            }
          }
        }
      }

    }

    .order-handle {
      font-size: 13px;
      line-height: 25px;
      color: gray;
      display: flex;
      justify-content: space-between;

      .amount-box {
        .amount {
          color: #C00000;
          font-weight: bold;
        }
      }

      .btn-container {
        color: white;
        line-height: 25px;
        min-width: 60px;
        text-align: center;

        .btn-wait-pay {
          display: flex;

          .btn-cancel {
            width: 60px;
            background-color: #C00000;
            margin-right: 10px;
          }

          .btn-pay {
            width: 60px;
            background-color: #C00000;
          }


        }

        .btn-receive {
          background-color: #C00000;
        }

        .btn-return {
          background-color: #C00000;
        }
      }
    }

  }
</style>
